<template>
	<view class="header-bg-image header-bg">
		<view style="height: 80rpx;"></view>
		<view>
			<view class="margin-30-0 flex-around" @click="$tools.navigateBack()">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
				<view class="fontSize-18 color-000 flex1 text-center">会员签到</view>
				<view style="width: 40rpx;"></view>
			</view>
			<view class="main">
				<view class="inner">
					<view class="uForm_box">
						<u--form labelPosition="bottom" :model="tempForm" :rules="rules" ref="uForm">
							<u-form-item label="收货人" prop="name" labelWidth="140rpx">
								<u--input v-model="tempForm.name" border="none" placeholder="请输入姓名"
									placeholderStyle="color:#999999"
									:customStyle="{padding:'20rpx 36rpx',borderRadius:'14rpx',marginTop:'10rpx',border:'1px solid #DBDBDB',
									backgroundColor: '#ffffff',}"></u--input>
							</u-form-item>
							<!-- <u-form-item label="后缀" prop="suffix" labelWidth="140rpx">
								<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
									<u-radio size="16" labelSize="16" iconSize="10"
										:customStyle="{marginBottom: '8px',marginRight:'20px'}"
										v-for="(item, index) in radiolist1" :key="index" :label="item.name"
										:name="item.name">
									</u-radio>
								</u-radio-group>
							</u-form-item> -->
							<u-form-item label="手机号码" prop="mobile" labelWidth="140rpx">
								<u--input v-model="tempForm.mobile" border="none" placeholder="请输入联系方式" maxlength="11"
									type="number" placeholderStyle="color:#999999"
									:customStyle="{padding:'20rpx 36rpx',borderRadius:'14rpx',marginTop:'10rpx',border:'1px solid #DBDBDB',
									backgroundColor: '#ffffff',}"></u--input>
							</u-form-item>
							<!-- <u-form-item label="所在地区" prop="address" labelWidth="140rpx">
								<u--input v-model="tempForm.area" border="none" placeholder="请选择所在地区"
									placeholderStyle="color:#999999"
									:customStyle="{padding:'20rpx 36rpx',borderRadius:'14rpx',marginTop:'10rpx',border:'1px solid #DBDBDB',
									backgroundColor: '#ffffff',}"></u--input>
							</u-form-item> -->
							<view class="flex-between padding-bottom20 margin-top20 margin-bottom20 input-view">
								<view class="fontSize-15 color-333">地址<span class="color-FE3232">*</span></view>
								<view class="flex-alignItems-center" @click="show = true">
									<view class="fontSize-15 color-333" v-if="areaAdreess">{{areaAdreess}}</view>
									<view class="fontSize-15 color-999" v-else>请选择</view>
									<u-icon name="arrow-right" color="#333333" size="20"></u-icon>
								</view>
							</view>
							<u-form-item label="详细地址" prop="remark" labelWidth="140rpx">
								<u--input v-model="tempForm.address" border="none" placeholder="例：5号楼203室"
									placeholderStyle="color:#999999"
									:customStyle="{padding:'20rpx 36rpx',borderRadius:'14rpx',marginTop:'10rpx',border:'1px solid #DBDBDB',
									backgroundColor: '#ffffff',}"></u--input>
							</u-form-item>
						</u--form>
					</view>
					<view class="setDefault">
						<label class="radio" @tap="selectevent">
							<radio value="r1" style="transform: scale(0.7);" color="#967C5E" :checked="select" />
						</label>
						<view class="text">
							设置为默认地址
						</view>
					</view>
					<view class="btn">
						<u-button type="primary" text="保存" @tap="handleSave" color="#967C5E"
							:customStyle="{height:'90rpx',borderRadius:'14rpx'}"></u-button>
						<view class="" style="margin-top: 20rpx;" v-if="order_id">
							<u-button type="primary" text="删除该地址" :plain="true" @tap="handleDel" color="#967C5E"
								:customStyle="{height:'90rpx',borderRadius:'14rpx'}"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 地址 -->
		<u-picker @confirm="confirm" @cancel="show=false" :show="show" ref="uPicker" keyName="name" :loading="loading" :columns="columns" @change="changeHandler">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '', //名字
				items: [{
						value: '0',
						name: '先生',
						checked: 'true'
					},
					{
						value: '1',
						name: '女士'
					}
				],
				current: 0,
				cell: '', //手机号
				detailed_address: '', //详细地址
				columnsels: '',
				tag: ['家', '公司', '学校', '其他'],
				tagindex: 0, //标签选中的
				state: '', //区分判断新增修改
				order_id: '',
				region: ['', '', ''],

				// 添加收货地址
				tempForm: {
					name: '', //收货人
					// suffix: '先生', //后置
					mobile: '', //手机号码
					area: '', //地址
					address: '', //门牌号
					is_default: 0 //是否默认地址
				},
				rules: {},
				// 是否是默认地址
				select: false,
				// 先生或者女士
				radiolist1: [{
						name: '先生',
						disabled: false
					},
					{
						name: '女士',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '先生',
				// 地址
				show: false,
				columns: [
					[],
					[]
				],
				columnData: [
					[],
					[],
					[]
				],
				// addrId:{
				// 	provinceId:'',
				// 	cityId:'',
				// 	districtId:''
				// },
				loading: false,
				// 地址
				areaAdreess:'',
			};

		},
		onLoad(obj) {
			console.log(obj)
			// this.state = obj.query.state
			this.order_id = obj.order_id
			if(obj.item){
				let data = JSON.parse(obj.item)
				if (data.id) {
					this.tempForm.name = data.name
					this.tempForm.mobile = data.mobile
					this.tempForm.area = data.area
					this.areaAdreess  = data.area
					this.tempForm.address = data.address
					// data.suffix == '先生' ? this.radiovalue1 = '先生' : '女士'
					data.is_default == 1 ? this.select = true : this.select = false
				}
			}
			this.initData()
		},
		computed: {},
		methods: {
			// 改变地址
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					this.$http.post(this.$api.area,{
						pid:this.columns[columnIndex][index].id,
					},{token:true}).then((res)=>{
						if(res.code==1){
							let columns=[[...this.columns[0]],[],[]]
							columns[1]=[...res.data]
							// console.log(res.data[0].id)
							// return
							this.$http.post(this.$api.area,{
								pid:res.data[0].id
							},{token:true}).then((res2)=>{
								if(res2.code==1){
									columns[2]=[...res2.data]
									picker.setColumnValues(1,columns[1])
									picker.setColumnValues(2,columns[2])
									this.columns=[...columns]
									this.loading=false
								}
							})
						}
					})
				}else if(columnIndex === 1){
					this.loading = true
					this.$http.post(this.$api.area,{
						pid:this.columns[columnIndex][index].id
					},{token:true}).then((res)=>{
						if(res.code==1){
							let columns=[[...this.columns[0]],[...this.columns[1]],[]]
							columns[2]=[...res.data]
							picker.setColumnValues(1,...columns)
							this.columns=[...columns]
							this.loading=false
						}
					})
				}
			},
			confirm(e) {
				console.log(e)
				this.areaAdreess = e.value[0].name+',' + e.value[1].name+',' + e.value[2].name
				// let addr=[]
				// this.addrId.provinceId=e.value[0].id
				// this.addrId.cityId=e.value[1].id
				// this.addrId.districtId=e.value[2].id
				// addr.push(e.value[0].name,e.value[1].name,e.value[2].name)
				// this.forms.area=addr.join(" ")
				this.tempForm.area = this.areaAdreess
				this.show=false
			},
			// 重置地址
			initData() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$http.post(this.$api.area,{
					pid:0
				},{token:true}).then((res)=>{
					if(res.code==1){
						let columns=[[],[],[]]
						columns[0]=[...res.data]
						this.$http.post(this.$api.area,{
							pid:res.data[0].id,
						},{token:true}).then((res2)=>{
							if(res2.code==1){
								columns[1]=[...res2.data]
								this.$http.post(this.$api.area,{
									pid:res2.data[0].id,
								},{token:true}).then((res3)=>{
									if(res3.code==1){
										columns[2]=[...res3.data]
										this.$refs.uPicker.setColumnValues(1,columns[1])
										this.$refs.uPicker.setColumnValues(2,columns[2])
										this.columns=[...columns]
										console.log(this.columns)
										uni.hideLoading()
									}
								})
							}
						})
					}
				})
			},
			// 选择先生或者女士
			groupChange(n) {
				this.tempForm.suffix = n
			},
			// radioChange(n) {
			// 	console.log('radioChange', n);
			// },
			// 选择是否默认地址
			selectevent() {
				this.select = this.select ? false : true
				this.tempForm.is_default = this.select ? 1 : 0
			},
			// radioChange: function(evt) {
			// 	for (let i = 0; i < this.items.length; i++) {
			// 		if (this.items[i].value === evt.detail.value) {
			// 			this.current = i;
			// 			break;
			// 		}
			// 	}
			// },
			// 保存
			handleSave() {
				this.add_deleteApi()
			},
			// 删除
		   async handleDel() {
				let data = await this.$http.post(this.$api.address_del,{
					address_id:this.order_id
				},{token:true})
				if (data.code == 1) {
					uni.showToast({
						title: data.msg,
						icon: "success",
						success() {
							uni.navigateBack({
								delta: 1
							})
				
						}
					})
				} else {
					uni.showToast({
						title: data.msg,
						icon: "error"
					})
				}
			},
			async add_deleteApi() {
				if (!this.tempForm.name) {
					return uni.showToast({
						title: '请输入收货人',
						icon: 'none'
					})
				}
				if (!this.tempForm.mobile) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				if (!this.tempForm.area) {
					return uni.showToast({
						title: '请输入所在地区',
						icon: 'none'
					})
				}
				if (!this.tempForm.address) {
					return uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
				}
				
				console.log(this.tempForm)
				if(!this.order_id){
					// let data = await address_add(this.tempForm)
					let data = await this.$http.post(this.$api.address_add,this.tempForm,{token:true})
					if (data.code == 1) {
						uni.showToast({
							title: data.msg,
							icon: "success",
							success() {
								uni.navigateBack({
									delta: 1
								})
					
							}
						})
					} else {
						uni.showToast({
							title: data.msg,
							icon: "error"
						})
					}
				}else{
					this.tempForm.address_id = this.order_id
					// let data = await address_edit(this.tempForm)
					let data = await this.$http.post(this.$api.address_edit,this.tempForm,{token:true})
					if (data.code == 1) {
						uni.showToast({
							title: data.msg,
							icon: "success",
							success() {
								uni.navigateBack({
									delta: 1
								})
					
							}
						})
					} else {
						uni.showToast({
							title: data.msg,
							icon: "error"
						})
					}
				}
			},
			tag_(index) {
				console.log(index);
				this.tagindex = index
			},
			//点击确定按钮
			bindRegionChange: function(e) {
				console.log(e.detail.value)
				console.log(e.detail.code)
				this.columnsels = ''

				this.region = e.detail.value
				e.detail.value.forEach((res, index) => {
					console.log(res);
					if (index < 2) {
						this.columnsels += res + '-'
					} else {
						this.columnsels += res
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.input-view{
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding: 25rpx 20rpx;
		border: 1px solid #DBDBDB;
	}
	.main {
		padding: 0 30rpx;
		.setDefault {
			display: flex;
			align-items: center;

			.text {
				margin-left: 20rpx;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}

	.content_box {
		width: 750rpx;
		background: #FFFFFF;

		.content {
			width: 90%;
			margin: 0 auto;

			.content_name {
				height: 201rpx;
				display: flex;
				align-items: center;

				.content_name_left {
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
				}

				.content_name_right {
					width: 537rpx;
					margin-left: 20rpx;

					.content_name_right_top {
						padding-top: 30rpx;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #EBEBEB;

						input {
							width: 100%;
							height: 100%;
						}
					}

					.content_name_right_bottom {
						padding: 34rpx 0;
					}
				}

			}

			.addmessage {
				display: flex;
				align-items: center;
				border-top: 1rpx solid #EBEBEB;
				padding: 30rpx 0;

				.addmessage_1 {
					width: 130rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
				}

				.addmessage_2 {
					font-size: 26rpx;
					font-weight: 400;
					color: #959595;
					line-height: 37rpx;
					margin-left: 40rpx;

					input {
						width: 100%;
						height: 100%;
					}
				}

				.addmessage_3 {
					.addmessage_3_btn {}
				}
			}
		}
	}

	.btn {
		// 	width: 686rpx;
		// 	height: 80rpx;
		// 	background: #02B6FD;
		// 	border-radius: 6rpx;
		// 	margin: 0 auto;
		// 	font-size: 32rpx !important;
		// 	font-weight: 400 !important;
		// 	color: #FFFFFF;
		// 	line-height: 80rpx;
		// 	text-align: center;
		margin-top: 180rpx;
	}

	// .page {
	// 	background: #ffffff;
	// 	min-height: 100vh;
	// }
</style>